<template>
    <div class="video">
        <br/>
<!--        <br/>-->
        <br/>
        <br/>
        <br/>
        <br/>
<!--        <button @click="play">播放</button>-->
        <danmu/>
        <video
                id="videoElement"
                controls
                autoplay
                muted
                width="100%"
                height="100%">
        </video>
<!--        <button @click="play">播放</button>-->
<!--        <button @click="stop">关闭弹幕</button>-->
        <!--                            收藏-->
        <el-button @click="collect" :class="{active:isActive}">
            <i v-if="!isActive" class="el-icon-star-off" ></i>
            <i v-if="isActive" class="el-icon-star-on" ></i>
        </el-button>
    </div>
</template>

<script>
    import flvjs from 'flv.js'
    import danmu from "./danmu";

    import {mapState} from "vuex"
    import {mapGetters} from "vuex"
    import {mixin} from "../mixins"
    import {findVideo, setCollect,setHistory} from "../api";

    export default {
        name:"play",
        mixins:[mixin],
        components:{
            danmu,

        },

        data () {
            return {
                msg: 'Welcome to Your Vue.js App',
                flvPlayer:null
            }
        },

        computed:{
            ...mapState("user",{
                userId: state=>state.userId
            }),
            ...mapGetters([
                'listOfVideos',
                'loginIn',
                'isActive'
            ])
        },
        created() {
            this.his()

        },
        mounted() {
            if (flvjs.isSupported()) {
                var videoElement = document.getElementById('videoElement');
                this.flvPlayer = flvjs.createPlayer({
                    // type: 'flv',
                    type: 'mp4',
                    // isLive: true,
                    hasAudio: true,
                    cors: true,
                    url: this.$route.query.videourl

                });
                console.log(this.$route.query.videourl)
                this.flvPlayer.attachMediaElement(videoElement);
                this.flvPlayer.load();
                this.flvPlayer.play();
            }
        },
        methods:{
            play () {
                this.flvPlayer.play();
            },
            stop () {
                console.log(danmu.data().barrageIsShow)
                danmu.methods.haha();
            },
            //收藏
            collect(){
                if(this.loginIn){
                    var params=new URLSearchParams();
                    console.log(this.userId)
                    console.log(this.$route.query.videoid)

                    params.append('userid',this.userId)
                    params.append('videoid',this.$route.query.videoid)

                    setCollect(params).then(res=>{
                        // console.log(res)
                        if(res.status===1){
                            this.$store.commit('setIsActive',true);
                            this.notify('收藏成功','success')
                        }else{
                            this.notify('已收藏','error');
                        }
                    })
                }else{
                    this.notify('请先登录','warning')
                }
            },
            //历史
            his(){
                if(this.loginIn){
                    var params=new URLSearchParams();
                    console.log(this.userId)
                    console.log(this.$route.query.videoid)

                    params.append('userid',this.userId)
                    params.append('videoid',this.$route.query.videoid)

                    setHistory(params).then(res=>{
                        // console.log(res)
                        if(res.status===1){
                            this.$store.commit('setIsActive',true);
                        }else{
                        }
                    })
                }else{
                    this.notify('请先登录','warning')
                }
            },
        }
    };
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 0px;
    }

    #p
    {
        width:1000px;
    }
    .co{
        width: 100%;
        color: #00ccff;
    }
</style>
